<link rel="stylesheet" type="text/css" href="../../vendor/datatables/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="../../vendor/datatables/css/buttons.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="../../vendor/datatables/css/select.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="../../vendor/datatables/css/editor.dataTables.min.css" />

<script src="../../vendor/datatables/js/jquery.dataTables.min.js"></script>
<script src="../../vendor/datatables/js/dataTables.buttons.min.js"></script>
<script src="../../vendor/datatables/js/dataTables.select.min.js"></script>
<script src="../../vendor/datatables/js/dataTables.editor.min.js"></script>
<script src="../../vendor/datatables/js/dataTables_CN.js"></script>

<!-- 用户管理页面 -->
<div id="page-wrapper" class="userManage-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">用户管理
                <small class="pull-right" id="userManageHeader-btn">
                    <button type="button" class="btn btn-primary fontSize18">用户录入</button>
                    <button type="button" class="btn btn-primary fontSize18">用户修改</button>
                    <button type="button" class="btn btn-primary fontSize18">用户删除</button>
                    <button type="button" class="btn btn-primary fontSize18">用户角色配置</button>
                </small>
            </h1>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading fontSize24">
                    <i class="fa fa-search-plus fa-fw"></i> 用户查询
                </div>

                <div class="panel-body userQuery">
                    <div class="well well-sm">
                        <table class="fontSize16">
                            <tr class="text-center">
                                <td>用户编号：</td>
                                <td>
                                    <input type="text" class="form-control" id="userIDInput" value="" placeholder="请输入用户编号" />
                                </td>
                                <td>用户姓名：</td>
                                <td>
                                    <input type="text" class="form-control" id="userNameInput" value="" placeholder="请输入用户姓名" />
                                </td>
                            </tr>

                            <tr class="text-center">
                                <td>所在地方：</td>
                                <td>
                                    <select class="form-control" name="userLocation" id="userLocationInput">
                                        <option selected disabled>--请选择--</option>
                                        <option value="option1">选项1</option>
                                        <option value="option2">选项2</option>
                                        <option value="option3">选项3</option>
                                        <option value="option4">选项4</option>
                                    </select>
                                </td>
                                <td>联系电话：</td>
                                <td>
                                    <input type="number" class="form-control" id="userPhoneInput" value="" placeholder="请输入联系电话" />
                                </td>
                            </tr>

                            <tr class="text-center">
                                <td>启用状态：</td>
                                <td>
                                    <select class="form-control" name="initiatemode" id="initiateModeInput">
                                        <option selected disabled>--请选择--</option>
                                        <option value="option1">选项1</option>
                                        <option value="option2">选项2</option>
                                        <option value="option3">选项3</option>
                                        <option value="option4">选项4</option>
                                    </select>
                                </td>
                                <td colspan="2">
                                    <button type="button" class="btn btn-default fontSize16" id="userQueryBtn">查询</button>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-primary">
                <div class="panel-heading fontSize24">
                    <i class="fa fa-bar-chart-o fa-fw"></i> 用户列表
                </div>

                <div class="panel-body" id="userListBody">
                    <table class="display table table-striped table-bordered" cellspacing="0" width="100%" id="userListTable">
                        <thead>
                        <tr>
                            <th></th>
                            <th>用户编号</th>
                            <th>用户姓名</th>
                            <th>用户类型</th>
                            <th>所在地方</th>
                            <th>联系电话</th>
                            <th>过滤数据标识</th>
                            <th>启用状态</th>
                            <th>备注信息</th>
                        </tr>
                        </thead>
                    </table>

                </div>
            </div>
        </div>
    </div>
</div>

<script>
    (function () {

        var editor;

        $(document).ready(function() {
            editor = new $.fn.dataTable.Editor( {
                "ajax": "../../server/test.json",
                "table": "#userListTable",
                "fields": [ {
                    "label": "First name:",
                    "name": "first_name"
                }, {
                    "label": "Last name:",
                    "name": "last_name"
                }, {
                    "label": "Position:",
                    "name": "position"
                }, {
                    "label": "Office:",
                    "name": "office"
                }, {
                    "label": "Extension:",
                    "name": "extn"
                }, {
                    "label": "Start date:",
                    "name": "start_date",
                    "type": "datetime"
                }, {
                    "label": "Salary:",
                    "name": "salary"
                }
                ]
            } );

            $('#userManageHeader-btn').on('click', '.btn', function (e) {
                e.preventDefault();

                editor.create( {
                    title: '进行用户管理的操作',
                    buttons: '完成'
                } );
            } );

            var userListTable = $('#userListTable').DataTable( {
                ordering: false,
                ajax: "../../server/tableData.json",
                columns: [
                    {
                        data: null,
                        defaultContent: '',
                        className: 'select-checkbox',
                        orderable: false
                    },
                    { data: "extn" },
                    { data: null, render: function ( data, type, row ) {
                        return data.first_name+' '+data.last_name;
                    } },
                    { data: null, defaultContent: '' },
                    { data: "position" },
                    { data: "office" },
                    { data: "start_date" },
                    { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) },
                    { data: null, defaultContent: '' }
                ]
            } );

            /* 隐藏搜索框 */
            $('.dataTables_filter').css('display', 'none');

            /* 可多行选择 */
            $('#userListTable tbody').on( 'click', 'tr', function () {
                $(this).toggleClass('selected');
            } );

            /* 查询名字 */
            $('#userQueryBtn').on( 'click', function () {
                var $input = $('#userNameInput');
                if($input.val()){
                    userListTable.search( $input.val() ).draw();
                } else {
                    alert('输入不能为空！');
                }
            } );
        });

    })();
</script>
